import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../views/Main.vue'
import Catalog from '../views/Catalog.vue'
import Cart from '../views/Cart.vue'
import Account from '../views/Account.vue'
import Order from '../views/Order.vue'
import Display from '../views/Display.vue'
import DisplayItem from '../views/DisplayItem.vue' 
import InfoItem from '../views/InfoItem.vue'
import Edit from '../views/Edit.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Main',
    component: Main
  },
  {
    path: '/catalog',
    name: 'Catalog',
    component: Catalog
  },
  {
    path: '/cart',
    name: 'Cart',
    component: Cart
  },
  {
    path: '/account',
    name: 'Account',
    component: Account
  },
  {
    path: '/order',
    name: 'Order',
    component: Order
  }, 
  {
    path: '/display/:category',
    name: 'Display',
    component: Display
    // ,children: {
    //   path: 'product/:product',
    //   name: 'DisplayItem',
    //   component: DisplayItem
    // }
  },
  {
    path: '/product/:product',
    name: 'DisplayItem',
    component: DisplayItem
  }, 
  {
    path: '/item/:item',
    name: 'InfoItem',
    component: InfoItem
  }, 
  {
    path: '/edit',
    name: 'Edit',
    component: Edit
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})


export default router
